<template>
  <div class="AlarmLogBody">
    <el-divider content-position="left" style="">{{$t('日志告警策略')}}</el-divider>
    <el-table size='mini' ref="multipleTable" border :data="logList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="mode-name" :label="$t('日志模块')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(modeNameArray[scope.row['mode-name']]) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" :label="$t('日志监控策略状态')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(stateArray[scope.row.state]) }}
        </template>
      </el-table-column>
      <el-table-column prop="level" :label="$t('日志告警级别')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(levelArray[scope.row.level]) }}
        </template>
      </el-table-column>
      <el-table-column prop="alarm-voice" :label="$t('告警声音开关')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(alarmVoiceArray[scope.row['alarm-voice']]) }}
        </template>
      </el-table-column>
      <el-table-column prop="alarm-method" :label="$t('告警信息发送方式')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(alarmMethodArray[scope.row['alarm-method']]) }}
        </template>
      </el-table-column>
      <el-table-column prop="reciver" :label="$t('告警接收者')" align='center' min-width="120">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reciver" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="interval" :label="$t('告警时间间隔(秒)')" align='center' min-width="120"></el-table-column>
      <el-table-column prop="right" align='center' fixed="right" :label="$t('日志告警操作')" min-width="120">
        <template slot-scope="scope">
          <el-button type="success" plain size="mini" @click="dialogVisible(scope.row)" :class="'edit' + (scope.$index+1)">{{$t('编辑')}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="right" align='center' fixed="right" :label="$t('统计告警')" min-width="130">
        <template slot-scope="scope">
          {{ $t(statisticsStateList[scope.row['statistics-state']]) }}
          <el-button type="success" plain size="mini" @click="statisticsDialogVisible(scope.row)" style="margin-left:10px;" :class="'config' + (scope.$index+1)">{{$t('配置')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <log-dialog v-if="logDialogVisible" ref="refLogDialogVisible"></log-dialog>
    <LogStateDialog v-if="stateDialogVisible" ref="refStateDialogVisible"></LogStateDialog>
  </div>
</template>
<script>
import { getLogAlertArray } from '@/api/system/alarm/strategy'
import LogDialog from './LogDialog'
import LogStateDialog from './LogStateDialog'
// import 'view-design/dist/styles/iview.css'
export default {
  name: 'LogTable',
  components: {
    LogDialog,
    LogStateDialog
  },
  data () {
    return {
      logDialogVisible: false,
      stateDialogVisible: false,
      logList: [],
      modeNameArray: {
        'access-control': '访问控制',
        'attack-defense': '异常报文攻击防御',
        'ddos-defense': 'FLOOD攻击防御',
        'ips': '入侵防御',
        'content-filter': '深度过滤策略',
        'av': '病毒过滤',
        'url-filter': 'URL过滤',
        'mgmt-defense': '自身防护'
      },
      stateArray: {
        'enable': '启用',
        'disable': '禁用'
      },
      alarmVoiceArray: {
        'on': '开',
        'off': '关'
      },
      alarmMethodArray: {
        'none': '无',
        'smtp': 'SMTP',
        'ai-smtp': 'SMTP'
      },
      levelArray: {
        'alert': 'ALERT',
        'info': 'INFO',
        'error': 'ERROR',
        'debug': 'DEBUG'
      },
      statisticsStateList: {
        'disable': '已关闭',
        'enable': '已开启'
      }
    }
  },
  created () {
    this.listData()
  },
  methods: {
    // 列表
    listData () {
      getLogAlertArray().then(res => {
        if (res.status === 0) {
          this.logList = res.info
        }
      })
    },
    // 编辑按钮表单
    dialogVisible (data) {
      this.logDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refLogDialogVisible.init(data)
      })
    },
    statisticsDialogVisible (data) {
      this.stateDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refStateDialogVisible.init(data)
      })
    }
  }
}
</script>
<style lang="less">
.AlarmLogBody {
  margin-top: 60px !important;
  .el-divider__text {
    font-size: 20px;
  }
  .el-divider {
    margin: 40px 0;
  }
}
</style>
